<template>
    <div class="category">
      <h3>{{title}}分类</h3>
      <ul>
        <li v-for="(item, index) in listData" :key="index ">{{ item }}</li>
      </ul>
      <!-- 定义一个插槽(挖个坑，等着组件的使用者进行填充) -->
      <slot>如果什么也没有填充，就展示这句话</slot>
      
    </div>
</template>

<script>
export default {
  name: 'Category',
  data() {
    return {
    }
  },
  props: ['title','listData'],
  methods: {
  },
  mounted() {
  }

}
</script>

<style scoped>
  .category {
    background-color: skyblue;
    width: 200px;
    height: 300px;
    margin: 20px;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #888888;
  }
  h3 {
    text-align: center;
    background-color: orange;
  }
  img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
</style>